<template>
  <!-- 检测信息 -->
  <div class="testing-information borderStyle">
    <div class="testing-information-title smallCenterTitle centerbox">检测信息</div>
    <div class="testing-information-content">
      <div class="content-progress startbox" v-for="(item,index) of datas" :key="index">
        <div class="text">{{item.name}}</div>
        <div class="greens startbox">
          <div v-for="(bock, i) in item.valueProgress" :key="i" class="bock"></div>
        </div>

        <div class="name">{{item.val}}%</div>
      </div>
      <div class="content-number centerbox">
        <div class="text">{{onlinedatas.name}}</div>
        <div class="name">{{onlinedatas.val}}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { EChartOption } from "echarts";
interface dataName {
  name: string;
}
interface seriesData {
  name: string;
  value: number;
  itemStyle: object;
}
@Component
export default class TestingInformation extends Vue {
  @Prop() datas!: any;
  @Prop() onlinedatas!: any;
  NameList: Array<dataName> = [
    {
      name: "电子钥匙电量百分比",
    },
    {
      name: "钥匙座电量百分比",
    },
  ];
  mounted() {
    this.fetch();
  }
  fetch() {}
}
</script>

<style lang="scss" scoped>
.testing-information {
  width: 100%;
  height: 100%;
  &-title {
    width: 4.32rem;
    height: 0.36rem;
    margin: auto;
    color: #fff;
  }
  &-content {
    width: 100%;
    height: calc(100% - 0.36rem);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 0 0.1rem;
    .content-progress {
      width: 100%;
      height: 0.4rem;

      .text {
        width: 2.3rem;
        text-align: right;
        margin-right: 0.1rem;
        box-sizing: border-box;
      }
      .greens {
        width: 1.2rem;
        .bock {
          width: 6px;
          height: 16px;
          background: rgba(0, 253, 101, 1);
          border-radius: 3px;
          margin-left: 0.05rem;
        }
      }

      .name {
        color: #00fd65;
        margin-left: 0.1rem;
      }
    }
    .content-number {
      width: 100%;
      height: 20%;
      position: relative;
      .text {
        width: 2.3rem;
        text-align: right;
        margin-right: 0.1rem;
        box-sizing: border-box;
      }
      .name {
        width: 40%;
      }
    }
  }
}
</style>